<template>
	<view class="control">
		<view class="" style="width: 100%;background-color: #fff;">
			<view class="top">
				<!-- <view class="top_list"> -->
				<!-- <u-swiper :list="data.slider" height="340rpx" :indicator="true"></u-swiper> -->
				<image style="width: 96vw;height: auto;border-radius: 12rpx;margin-left: 2vw;"
					:src="cardData.show_img" mode=""></image>
				<!-- </view> -->
				<!-- <view class="postion">
					<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				</view> -->
			</view>
		</view>
		<!-- <QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar> -->
		<view class="box-1">
			<!-- <image style="width: 100%" mode="widthFix" :src="data.cover"></image> -->
			<view class="box-list">
				<!-- <u-swiper :list="data.slider" height="450rpx" :indicator="true"></u-swiper> -->
			</view>
			<view class="detail-box">
				<view class="detail-1">
					{{ cardData.race_name }}
				</view>
				<!-- <view class="detail-2">
					{{cardData.display_start}} - {{cardData.display_end}}
				</view> -->
				<!-- <view class="flex-between detail-3"> -->
				<!-- <view class="flex-align">
						<view class="tag">初级</view>
						<view class="tag">成人</view>
					</view> -->
				<!-- <view class="info"> {{ data.classNum }}节课 </view> -->
				<!-- </view> -->
				<view class="flex-between detail-4">
					<view><text class="price">￥{{ cardData.price }}</text><text class="info">起</text> </view>
					<view class="info"> 库存：{{cardData.stock}}</view>
				</view>
			</view>
		</view>

		<view class="box-2">
			<!-- <view class="title">适用校区</view> -->
			<!-- @click="openStoreShow" -->
			<view class="flex-align">
				<view class="name">适用区域:</view>
				<view class="flex-align icon">
					<text>{{cardData.venue_name}}</text>
					<!-- <u-icon name="arrow-right" color="rgb(153,153,153)" size="14"></u-icon> -->
				</view>
			</view>
			<view class="flex-align" style="margin-top: 10rpx;">
				<view class="name">适用人群:</view>
				<view class="flex-align icon">
					<text>{{cardData.suit_person}}</text>
				</view>
			</view>
			<view class="flex-align" style="margin-top: 10rpx;">
				<view class="name">适用时间:</view>
				<view class="flex-align icon">
					<text>{{cardData.show_time}}</text>
				</view>
			</view>
			<!-- <view class="flex-align" style="margin-top: 10rpx;">
				<view class="name">报名时间:</view>
				<view class="flex-align icon">
					<text>{{ cardData.display_start }}-{{ cardData.display_end }}</text>
				</view>
			</view> -->
		</view>
		<!-- <view class="box-1">
			<view class="data-item flex-align">
				<view class="image">
					<image style="width: 280rpx;height: 180rpx;border-radius: 12rpx;" :src="cardData.show_img" mode=""></image>
				</view>
				<view class="detail">
					<view>
						<view class=""
							style="display: flex;flex-direction: row;align-items: center;margin-top: 15rpx;justify-content: space-between;">
							<view class="title" style="flex:1">{{ cardData.race_name }}</view>
						</view>
					</view>
					<view class="flex-between">
						<view class="price">￥{{ cardData.price }}</view>
						<view class="price-2">销量：{{cardData.sales}}</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- <view class="box-2">
			<view class="flex-between" @click="openStoreShow">
				
				<view class="name" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 444rpx;">{{ venue_name }}</view>
				<view class="flex-align icon">
					<u-icon name="arrow-right" color="rgb(153,153,153)" size="14"></u-icon>
				</view>
			</view>
		</view>
-->
		<!-- <view class="box-3">

			<view class="flex-between image-1">
				<image :src="licheng" style="width: 670rpx;height: 80rpx;">
				</image>
			</view>
			<view class="flex-between" style="padding: 0 14rpx;">
				<text>选择商品</text>
				<text>付款成功</text>
				<text>获取二维码</text>
				<text>到店核销</text>
			</view>
		</view> -->

		<view class="box-4" v-if="cardData.buy_content">
			<u-parse :content="cardData.buy_content"></u-parse>
		</view>

		<view class="box-5" v-if="cardData.content">
			<u-parse :content="cardData.content"></u-parse>
		</view>

		<view class="">
			<view class="footer flex-align">
				<view class="menu" @click="backUp">
					<image mode="aspectFit" :src="icon1">
					</image>
					<text>首页</text>
				</view>

				<view class="menu">
					<u-button @click="onphone()" :plain="true" size="large" :customStyle="{
				  border: 'none',
				  display: 'flex',
				  flexDirection: 'column',
				  alignItems: 'center',
				}">
						<image mode="aspectFit" :src="icon2">
						</image>
						<text>客服</text>
					</u-button>
				</view>
				<view class="btn" @click="handSubmit" v-if="cardData.stock>0">
					<view class="">
						立即购买
					</view>
				</view>
				<view class="btn_n" v-else>
					<view class="">
						立即购买
					</view>
				</view>
			</view>
		</view>
		<!-- 场馆 -->
		<con-alert :show="alertShow" @close="close" isFooter>
			<!-- <view class="section"> -->
			<view class="select-list">
				<view class="item flex-align" v-for="item in cardData.venues" :key="item" @click="cardlist(item)">
					<view class="image">
						<u--image radius="5" :src="item.venue_thumb" width="100%" height="100%"></u--image>
					</view>
					<view class="detail">
						<view>
							<view class="name"> {{ item.venue_name }} </view>
							<view class="timer"> 营业时间：{{ item.operate_time }} </view>
						</view>

						<view class="flex-between bottom">
							<view class="flex-align"
								style="width: 65%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
								<u-icon name="map-fill" color="#cacaca" size="12"></u-icon>
								<text class="address">{{ item.address }}</text>
							</view>
							<view class="flex-align">
								<text>{{ item.phone }}</text>
								<u-icon name="phone" color="#cacaca" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- </view> -->
		</con-alert>

		<u-action-sheet :actions="phonelist" :closeOnClickAction="true" @close="phoneclose" :title="title"
			:show="phoneShow" @select="selectClick" :safeAreaInsetBottom="true"></u-action-sheet>

		<!-- 选择弹窗 -->
		<con-alert :show="selectAlertShow" @close="close2" isFooter title="请输入">
			<!-- <con-alert :show="selectAlertShow" @close="close2" isFooter @click="handSubmit"> -->
			<view class="section">
				<view class="section-1 flex-align">
					<view class="" style="width: 120rpx;">
						姓名:
					</view>
					<input type="text" v-model="ordersList.name" placeholder="请输入姓名"
						style="margin-left: 20rpx;font-size: 28rpx;" />
				</view>
				<view class="section-1 flex-align">
					<view class="" style="width: 120rpx;">
						手机号:
					</view>
					<input type="number" v-model="ordersList.phone" placeholder="请输入手机号" maxlength="11"
						style="margin-left: 20rpx;font-size: 28rpx;" />
				</view>
				<view class="section-1 flex-align">
					<view class="" style="width: 120rpx;">
						身份证:
					</view>
					<input type="idcard" v-model="ordersList.care" placeholder="请输入身份证" maxlength="18"
						style="margin-left: 20rpx;font-size: 28rpx;" />
				</view>
				<view class="">
					<view class="btns_s" @click="$noMultipleClicks(onenroll)">确定</view>
				</view>
			</view>
		</con-alert>
	</view>
</template>

<script>
	import conAlert from "@/components/com-alert/com-alert.vue";
	import footerLeft from "@/components/footer-left/footer-left.vue";
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				noClick: true,
				assetsPath: this.$https.assetsPath,
				licheng: this.$https.assetsPath + 'licheng.png',
				icon1: this.$https.assetsPath + '862b6f9c93e65cfcb577f4a64d67ea84e4ceaab6.png',
				icon2: this.$https.assetsPath + '6cd7f6b2160dea275976ebe6b316156040267837.png',
				alertShow: false,
				selectAlertShow: false, //选择商品
				tabActiveIndex: 0,
				list1: [{
						name: "购买说明",
					},
					{
						name: "用户须知",
					},
				],
				timeData: {},
				value: 0,
				cardData: {},
				project_id: "",
				card_id: "",
				appid: "",
				venue_id: "",
				venue_name: "",
				time_start: '',
				sale_end: '',
				sale_start: '',
				cardDatalength: '',
				phoneShow: false,
				phonelist: [{
					name: uni.getStorageSync('tel')
				}],
				title: '拨号',
				ordersList: {
					name: "",
					phone: "",
					care: "",
				},
				skulist: {},
				datalist: {}
			};
		},
		components: {
			conAlert,
			footerLeft
		},
		onLoad(options) {
			this.project_id = getApp().globalData.projectId
			this.id = options.id
			this.getCoperateByActDetail()

		},
		methods: {
			async getCoperateByActDetail() {
				let that = this;
				let postData = {
					id: this.id,
				};
				let res = await venues.getCoperateByActDetail(postData);
				if (res.code === 1) {
					this.cardData = res.data
				}
			},

			backUp() {
				var that = this
				uni.navigateTo({
					url: "/pages/index/index",
				})
			},
			cardlist(item) {
				// this.venue_name = item.venue_name
			},

			handSubmit() {
				this.selectAlertShow = true;
			},
			changeTab(data) {
				this.tabActiveIndex = data.index;
			},
			close2() {
				this.selectAlertShow = false;
			},
			openSelectAlert() {
				this.selectAlertShow = true;
			},
			close() {
				this.alertShow = false;
			},
			openStoreShow() {
				this.alertShow = true;
			},
			onChange(e) {
				this.timeData = e;
			},
			onphone() {
				this.phoneShow = true
				// uni.makePhoneCall({
				// 	phoneNumber: '156510210221'
				// })
			},
			phoneclose() {
				this.phoneShow = false
			},
			selectClick() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('tel')
				})
			},
			gophone() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('tel')
				})
			},
			async onenroll() {
				let that = this
				let skulist = {
					"goods_sku": this.cardData.goods_sku,
					"goods_code": this.cardData.goods_code,

				};
				this.skulist = JSON.stringify(skulist)
				if (!that.ordersList.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!that.ordersList.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!that.ordersList.care) {
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					})
					return
				}
				// this.projectArr = projectArr
				let params = {
					pay_method: 1,
					order_type: 8,
					venue_id: that.cardData.venue_id,
					project_id: getApp().globalData.projectId,
					app_id: that.$https.weixinAppId,
					owner: uni.getStorageSync("phone"),
					open_id: uni.getStorageSync("openid"),
					phone: that.ordersList.phone,
					username: that.ordersList.name,
					idcard: that.ordersList.care,
					goods_id: that.cardData.goods_id,
					goods_number: 1,
					consumption_type: '',
					pay_wait_time: that.cardData.pay_wait_time,
					windows: '',
					other_param: this.skulist
				};
				let res = await venues.createOrder(params);
				if (res.code == 1) {
					this.datalist = res.data
					if (res.data.need_pay >= '0.01') {
						uni.navigateTo({
							url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
								this.datalist.amount_payable +
								"&venue_id=" + that.cardData.venue_id + "&order_id=" + that.datalist.order_id +
								"&orderid=" + that.datalist.orderid + "&order_type=" + 8 + "&chaoshitype=" +
								2 + "&goods_id=" +
								that.cardData.goods_id,
						});
					} else {
						this.moniPay()
					}
				} else {
					uni.showModal({
						title: res.info,
						// 提示文字
						// content: '是否取消订单？',
						// 取消按钮的文字自定义
						cancelText: "取消",
						// 确认按钮的文字自定义
						confirmText: "我知道了",
						//删除字体的颜色 
						confirmColor: '#000000',
						//取消字体的颜色
						cancelColor: '#999',
						success: function(res) {

						}
					})
				}
			},
			async moniPay() {
				var nowdate = new Date().valueOf();
				var that = this;
				let params = {
					open_id: uni.getStorageSync("openid"),
					project_id: getApp().globalData.projectId,
					app_id: that.$https.weixinAppId,
					out_trade_no: that.datalist.order_id,
					payer_total: '',
					add_time: nowdate,
					transaction_id: 'ZF001',
					goods_type: '',
					order_type: 8,
					attach: this.projectArr,
					goods_id: that.cardData.goods_id,
					card_id: '',
					coupon_id: ''
				};
				let res = await venues.moniPay(params);
				if (res.code == 1) {
					uni.reLaunch({
						url: '/pages_a/my-event/my-event'
					})

				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;

		image {
			width: 35rpx;
			height: 35rpx;
		}

		text {
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 700;
			margin-top: 13rpx;
		}
	}

	button {
		margin: unset;
		padding: unset;
		background: unset;
	}

	button:after {
		border: unset;
	}

	.avatar-wrapper {
		border: none !important;
		border: none;
		/* 去掉边框 */
		/* 设置背景色为透明 */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		&::after {
			display: none;
		}
	}

	.u-content {
		padding: 24rpx;
	}

	.control {
		width: 100%;
		background-color: #EDF5F5;
		// min-height: 100vh;
		height: 100vh;
		overflow-y: auto;
		padding-bottom: 140rpx;

		.box-1 {
			.box-list {
				display: block;
			}

			.header {
				background-color: #f8123e;
				height: 106rpx;
				padding-left: 30rpx;
				box-sizing: border-box;

				image {
					width: 77rpx;
					height: 70rpx;
					margin-right: 24rpx;
				}

				.price-1 {
					white-space: nowrap;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 500;

					text {
						font-size: 44rpx;
						font-weight: 700;
					}
				}

				.tag {
					background-color: rgb(201, 17, 52);
					border-radius: 10rpx;
					padding: 4rpx 0;
					color: rgb(255, 255, 255);
					font-size: 18rpx;
					padding: 0px 8rpx;
					margin-left: 10rpx;
				}

				.price-2 {
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 500;
					white-space: nowrap;
					text-decoration: line-through;
				}

				.right {
					background-image: url("https://oss.szsportscenter.cn/img/fb107487b55578cce969722f50a8e34d8160773c.png");
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 222rpx;
					height: 106rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.info {
						color: rgb(248, 18, 62);
						font-size: 20rpx;
						font-weight: 700;
						white-space: nowrap;
					}

					.time {
						@include flex;
						align-items: center;

						&__custom {
							margin-top: 15rpx;
							width: 33rpx;
							height: 33rpx;
							background-color: rgb(248, 18, 62);
							border-radius: 4px;
							display: flex;
							justify-content: center;
							align-items: center;

							&__item {
								color: #fff;
								font-size: 20rpx;
								text-align: center;
							}
						}

						&__doc {
							padding: 0px 4px;
						}
					}
				}
			}

			.detail-box {
				padding: 0 18rpx 10rpx 10rpx;
				background-color: rgb(255, 255, 255);
				box-sizing: border-box;

				.detail-1 {
					color: #434343;
					font-size: 30rpx;
					font-weight: 600;
				}

				.detail-2 {
					margin-top: 26rpx;
					color: rgb(136, 136, 136);
					font-size: 26rpx;
					line-height: 20rpx;
				}

				.detail-3 {
					margin-top: 20rpx;

					.tag {
						padding: 3rpx 15rpx;
						background-color: rgb(240, 242, 245);
						border-radius: 4rpx;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						margin-right: 9rpx;
					}

					.info {
						color: rgb(136, 136, 136);
						font-size: 24rpx;
						font-weight: 700;
					}
				}

				.detail-4 {
					margin-top: 20rpx;

					.price {
						color: rgb(75, 166, 119);
						font-size: 36rpx;
						font-weight: 600;

					}

					.info {
						color: rgb(136, 136, 136);
						font-size: 26rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.box-2 {
			// margin-top: 20rpx;
			padding: 20rpx 20rpx;
			background-color: rgb(255, 255, 255);
			margin: 20rpx 20rpx;
			border-radius: 10rpx;

			.title {
				color: #4BA677;
				font-size: 28rpx;
				font-weight: 400;
				margin-bottom: 40rpx;
			}

			.name {
				color: #333333;
				font-size: 24rpx;
				font-weight: 400;
			}

			.icon {
				color: #333333;
				font-size: 24rpx;
				margin-left: 20rpx;
				// font-weight: 700;

				text {
					margin-right: 10rpx;
				}
			}
		}

		.box-1 {
			// padding: 30rpx 30rpx;
			padding: 10rpx 20rpx 10rpx 20rpx;
			background-color: rgb(255, 255, 255);
			margin-bottom: 20rpx;

			.data-item {
				margin-top: 20rpx;
				height: 180rpx;

				.image {
					width: 280rpx;
					height: 180rpx;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						font-weight: 600rpx;
					}

					.tag-list {
						margin-bottom: 10rpx;
						margin-top: 15rpx;

						.tag {
							font-size: 20rpx;
							// color: white;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							border: 1rpx solid #4BA677;
							color: #4BA677;
							// background-color: #e7e7e7;
							// background-color: #2979ff;
							margin-right: 10rpx;
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.price {
						font-size: 32rpx;
						color: #4BA677;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #bebebe;
						font-size: 24rpx;
					}
				}
			}
		}

		.box-2 {
			padding: 30rpx 20rpx;
			background-color: rgb(255, 255, 255);
			margin: 0 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx 10rpx 0 0;
			width: calc(100% - 40rpx);

			.title {
				color: #4BA677;
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 40rpx;
			}

			.name {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 700;
			}

			.icon {
				color: rgb(153, 153, 153);
				font-size: 28rpx;

				text {
					margin-right: 10rpx;
				}
			}
		}

		.box-3 {
			margin: 0 20rpx;
			padding: 10rpx 20rpx 25rpx 20rpx;
			color: #999999;
			font-size: 24rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 0 0 10rpx 10rpx;

			.image-1 {
				// padding: 0 10rpx;
				// margin-bottom: 26rpx;

				image {
					width: 74rpx;
					height: 74rpx;
				}
			}
		}

		.box-4 {
			margin: 0 20rpx;
			margin-top: 20rpx;
			// padding: 0rpx 20rpx 40rpx 29rpx;
			padding: 30rpx 30rpx;
			color: rgb(51, 51, 51);
			background-color: rgb(255, 255, 255);
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			// .con {
			// 	// margin-top: 20rpx;
			// 	font-size: 28rpx;
			// }
		}

		.box-5 {
			margin: 0 20rpx;
			// margin-top: 20rpx;
			// padding: 0rpx 20rpx 40rpx 29rpx;
			padding: 30rpx 30rpx;
			color: rgb(51, 51, 51);
			background-color: rgb(255, 255, 255);
			border-radius: 10rpx;
			margin-bottom: 50rpx;
			margin-top: 20rpx;

			// .title {
			// 	color: #4BA677;
			// 	font-size: 28rpx;
			// 	font-weight: 700;
			// 	margin-bottom: 40rpx;
			// }

			// .name {
			// 	color: rgb(51, 51, 51);
			// 	font-size: 28rpx;
			// 	font-weight: 700;
			// }

			// .icon {
			// 	color: rgb(153, 153, 153);
			// 	font-size: 28rpx;

			// 	text {
			// 		margin-right: 10rpx;
			// 	}
			// }
		}

		.footer {
			position: fixed;
			width: 100%;
			background-color: white;
			bottom: 0;
			left: 0;
			padding: 20rpx 25rpx 60rpx 25rpx;
			box-sizing: border-box;

			.menu {
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-right: 40rpx;

				image {
					width: 35rpx;
					height: 35rpx;
				}

				text {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 700;
					margin-top: 13rpx;
				}
			}

			.btn {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
				text-align: center;
				font-weight: 700;
			}

			.btn_s {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
				text-align: center;
				font-weight: 700;
			}

			.btn_n {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background-color: #a6a6a6;
				text-align: center;
				font-weight: 700;
			}
		}

		// 弹窗
		.select-list {
			.item {
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				height: 150rpx;
				border-bottom: 1px solid #cccccc;

				&:last-of-type {
					border: none;
					margin: 0;
					padding: 0;
				}

				.image {
					width: 150rpx;
					height: 100%;

					/deep/ .vue-ref {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					display: flex;
					height: 100%;
					flex: 1;
					width: 0;
					margin-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: 700;
						font-size: 28rpx;
						margin-bottom: 15rpx;
					}

					.timer {
						color: #cacaca;
						font-size: 20rpx;
					}

					.bottom {
						font-size: 20rpx;
						color: #cacaca;

						.address {
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.section {
			margin-left: 10rpx;

			.btns_s {
				background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
				border-radius: 20px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				padding: 26rpx 0;
				margin: 0px 30rpx;
				margin-top: 120rpx;
				text-align: center;
			}

			.section-1 {
				height: 80rpx;

				.image {
					width: 300rpx;
					height: 100%;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title2 {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							color: white;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							color: black;
							background-color: #e7e7e7;
							margin-right: 10rpx;
						}
					}

					.price {
						font-size: 32rpx;
						color: #000000;
						font-weight: 700;
						margin-right: 10rpx;
					}
				}
			}

			/deep/ .u-number-box {
				.u-number-box__minus,
				.u-number-box__plus,
				.u-number-box__input {
					width: 45rpx !important;
					font-size: 24rpx !important;
					height: 45rpx !important;
					border-radius: 50%;

					text {
						font-size: 24rpx !important;
					}
				}

				.u-number-box__input {
					background-color: transparent !important;
				}
			}

			.section-2 {
				margin-top: 50rpx;

				.sub-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.tag-list {
					display: flex;
					flex-wrap: wrap;

					.tag {
						background: #efefef;
						border-radius: 3px;
						font-size: 24rpx;
						font-weight: 500;
						color: #ffffff;
						padding: 7rpx 20rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}
				}
			}

			.section-3 {
				font-size: 22rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;

		image {
			width: 35rpx;
			height: 35rpx;
		}

		text {
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 700;
			margin-top: 13rpx;
		}
	}

	button {
		margin: unset;
		padding: unset;
		background: unset;
	}

	button:after {
		border: unset;
	}

	.avatar-wrapper {
		border: none !important;
		border: none;
		/* 去掉边框 */
		/* 设置背景色为透明 */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		&::after {
			display: none;
		}
	}
</style>